<template>
	<view class="login">
		<!-- 顶部结构 -->
		<view class="nav">
			<view class="nav-left">
				<view class="img-box">
					<image src="../../static/images/home_active.png" mode="widthFix" class="img"></image>
				</view>
				<view class="nav-title">Luckin Coffee</view>
			</view>
			<view class="nav-right" @click="toIndex">先逛一逛</view>
		</view>
		<!-- 顶部结构 -->
		<!-- 内容结构 -->
		<view class="section-box">
			<view class="section-title">欢迎回来</view>
			<view class="section-text">登录</view>
		</view>
		<!-- 内容结构 -->
		<!-- 登录结构 -->
		<view class="group">
			<u-form class="from_box" :model="form" ref="uForm">
				<u-form-item label="手机号:" prop="number" label-width="150rpx">
					<u-input v-model="form.number" type="text" placeholder="请输入手机号" />
				</u-form-item>
				<u-form-item label="密码:" prop="password" label-width="150rpx">
					<u-input v-model="form.password" type="password" placeholder="请输入密码" />
				</u-form-item>
				<view class="backLogin" @click="back">忘记密码？</view>
			</u-form>
			<view class="but-box">
				<button @click="submit" class="submit">登录</button>
				<button @click="show = true" class="register">注册</button>
			</view>
		</view>
		<!-- 登录结构 -->
		<!-- 弹出层 -->
		<u-popup v-model="show" mode="bottom" length="auto" border-radius="50" :closeable="true">
			<view class="popup-title">注册</view>
			<view class="popup-box">
				<u-form class="register-box" :model="forms" ref="uForms">
					<u-form-item label="手机号:" prop="number" label-width="150rpx">
						<u-input v-model="forms.number" type="text" placeholder="请输入手机号" />
					</u-form-item>
					<u-form-item label="密码:" prop="password" label-width="150rpx">
						<u-input v-model="forms.password" type="password" placeholder="请输入密码" />
					</u-form-item>
					<u-form-item label="昵称:" prop="nickName" label-width="150rpx">
						<u-input v-model="forms.nickName" type="text" placeholder="请输入昵称" />
					</u-form-item>
				</u-form>
				<button @click="useRegister" class="popup-btn">注册</button>
			</view>
		</u-popup>
		<!-- 弹出层 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				form: {
					number: '',
					password: ''
				},
				rules: {
					number: [{
						required: true,
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入11位的手机号',
						trigger: ['change', 'blur']
					}],
					password: [{
						required: true,
						pattern: /^[A-Za-z]\w{5,15}$/,
						message: '请输入正确的密码',
						trigger: ['change', 'blur']
					}]
				},
				forms: {
					number: '',
					password: '',
					nickName: ''
				},
				ruleser: {
					number: [{
						required: true,
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入11位的手机号',
						trigger: ['change', 'blur']
					}],
					password: [{
						required: true,
						pattern: /^[A-Za-z]\w{5,15}$/,
						message: '请输入正确的密码',
						trigger: ['change', 'blur']
					}],
					nickName: [{
						required: true,
						pattern: /^[\u4e00-\u9fa5A-Za-z0-9]{1,3}$/,
						message: '请输入(1-3位的昵称)',
						trigger: ['change', 'blur']
					}]
				}
			};
		},
		methods: {
			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toRegister() {
				this.$request({
					url: '/register',
					method: 'POST',
					data: {
						nickName: this.forms.nickName,
						password: this.forms.password,
						phone: this.forms.number
					},
					success: (res) => {
						// console.log(res)
						if (res.data.code == 100) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
							this.show = false
						} else {
							uni.showToast({
								title: res.data.msg,
							});
						}
					}
				});
			},
			toLogin() {
				this.$request({
					url: '/login',
					method: 'POST',
					data: {
						password: this.form.password,
						phone: this.form.number
					},
					success: (res) => {
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								duration: 2000
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my',
								})
							}, 1000)
							let token = res.data.token
							uni.setStorage({
								key: 'token',
								data: token
							})
						} else {
							// console.log("error")
							uni.showToast({
								title: res.data.msg,
							});
						}
					}
				});
			},
			submit() {
				this.$nextTick(() => {
					this.$refs.uForm.setRules(this.rules);
					this.$refs.uForm.validate(valid => {
						// if (valid) {
							this.toLogin()
						// } else {
						// 	console.log('验证失败');
						// }
					});
				});
			},
			useRegister() {
				this.$nextTick(() => {
					this.$refs.uForms.setRules(this.ruleser);
					this.$refs.uForms.validate(valid => {
						// if (valid) {
							this.toRegister()
						// } else {
						// 	console.log('验证失败');
						// }
					});
				});
			},
			back() {
				uni.navigateTo({
					url: '../findPassage/findPassage'
				});
			}
		},
		onReady() {}
	};
</script>
<style lang="less" scoped>
	.login {
		.nav {
			height: 100rpx;
			border-bottom: 2rpx solid #ccc;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.nav-left {
				display: flex;
				align-items: center;

				.img-box {
					width: 80rpx;
					height: 80rpx;

					.img {
						width: 100%;
					}
				}

				.nav-title {
					color: #646566;
					margin-left: 20rpx;
				}
			}

			.nav-right {
				color: #0c34ba;
				font-weight: bold;
			}
		}

		.section-box {
			margin: 0 30rpx;
			margin-top: 200rpx;

			.section-title {
				color: #646566;
				font-size: 70rpx;
				font-weight: bolder;
			}

			.section-text {
				color: #646566;
				font-size: 45rpx;
				padding: 50rpx 0;
			}
		}

		.group {
			.from_box {
				padding: 0 30rpx;

				::v-deep .u-input__right-icon {
					display: flex;
					flex-direction: row-reverse;
				}
			}

			.backLogin {
				font-size: 32rpx;
				float: right;
				padding: 10rpx 50rpx;
			}
		}

		.but-box {
			margin-top: 160rpx;
			padding: 0 40rpx;

			.submit {
				color: #fff;
				background-color: #0c34ba;
				margin-bottom: 20rpx;
				border-radius: 50rpx;
			}

			.register {
				border-radius: 50rpx;
				border: 2rpx solid #ccc;
			}
		}

		.popup-title {
			color: #646566;
			font-size: 50rpx;
			font-weight: bold;
			margin: 50rpx 50rpx;
			margin-bottom: 25rpx;
		}

		.popup-box {
			margin: 100rpx 0;
			margin-top: 0;
			padding: 0 30rpx;

			.register-box {
				::v-deep .u-input__right-icon {
					display: flex;
					flex-direction: row-reverse;
				}
			}

			.popup-btn {
				margin-top: 30rpx;
				color: #fff;
				border-radius: 50rpx;
				background-color: #0c34ba;
			}
		}
	}
</style>
